<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页 - 与世界分享你的知识、经验和见解</title>

    <!-- Bootstrap -->
    <link href="/knife/Public/home_style/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="/knife/Public/home_style/js/html5shiv.min.js"></script>
      <script src="/knife/Public/home_style/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/knife/Public/home_style/my.css">
</head>

<body>
    <div class="container" style="height:670px;">
        <div class="row">
        	<div class="col-md-4 col-md-offset-4">
                
                <center>
                    <div class="mt50"><a href="<?php echo U('Index/index');?>"><img src="/knife/Public/home_style/images/zhihu.png" width="160"></a></div>
                    <div class="mt40"><span>与世界分享你的知识、经验和见解</span></div>

                    <div class="relog mt30">
                        <a href="<?php echo U('Index/reg');?>">注册</a>
                        <a href="<?php echo U('Index/log');?>">登录</a>
                    </div>
                </center>

                <div class="mt30">
                    <form action="<?php echo U('doreg');?>" class="form-horizontal" role="form" id="regForm" method="post">
                        <div class="form-group">
                            <div class="col-sm-8 ml80">
                                <input type="text" class="form-control" name="name" placeholder="用户名" style="height:50px">
                                <p>*用户名必须是:  6-12数字字母下划线</p>
                                <span class=""></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 ml80">
                                <input type="text" class="form-control" name="phone" maxlength="11" placeholder="手机号（仅支持中国大陆）" style="height:50px">
                                <p>*请输入合法的手机号</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 ml80">
                                <input type="password" class="form-control" name="pass" placeholder="密码（不少于6位）" style="height:50px">
                                <p>*密码必须在6~18位之间</p>
                            </div>
                        </div>
                        <div class="mt20">
                            <button class="ml80 btn btn-info btn-ms" style="width:269px;height:50px">
                                <span>注册</span>
                            </button>
                         </div>
                    </form>
                </div> 
                
                <div id="gg" class="mt10">
                    <p class="ml80">点击「注册」按钮，即代表你同意<a href="#" target="_blank">《知乎协议》</a></p>
                </div>

            </div>
        </div>
    </div>
      
    <!-- jQuery -->
    <script src="/knife/Public/home_style/js/jquery.min.js"></script>
    <!-- bootstrap.min.js 必须放在JQ之后!!! -->
    <script src="/knife/Public/home_style/js/bootstrap.min.js"></script>
    <script src="/knife/Public/home_style/js/holder.min.js"></script>
    <script>
        var user = document.getElementById('regForm').name;
        var phone = document.getElementById('regForm').phone;
        var pass = document.getElementById('regForm').pass;
        var pus = document.getElementsByTagName('p');
        var sp = document.getElementsByTagName('span');
        console.log(pus);
        // 给用户名绑定oninput事件
        user.oninput = function(){
            if (user.value.match(/^\w{6,12}$/) === null) {
                // 不符合正则让字体变红
                pus[0].style.color = 'red';
                // return false;
            }else{
                //符合就变绿
                pus[0].style.color = "green";
            }
        }

        phone.oninput = function(){
            // pus[1].value = pus[1].value.replace(/\D/g, '');
            if (phone.value.match(/^\d{11}$/) === null) {
                pus[1].style.color = 'red';
                // return false;
            }else{
                pus[1].style.color = "green";
            }
        }

        pass.oninput = function(){
            if (pass.value.length < 6 || pass.value.length > 18) {
                pus[2].style.color = 'red';
                // return false;
            }else{
                pus[2].style.color = "green";
            }
        }
    </script>
</body>
</html>